axios({
  method: "get",
  url: "http://cba.itlike.com/public/index.php?s=/api/category/list",
}).then(
  ({
    data: {
      data: { list },
    },
  }) => {
    // console.log(list);
    list.forEach((ele, index) => {
      // console.log(ele);
      document.querySelector(
        ".classify-items"
      ).innerHTML += ` <div class="item" >
      <p data-id='${index}'>${ele.name}</p>
  </div>`;

      // console.log(ele);
    });
    document.querySelector(".item p").classList.add("active");
    //   通过点击获取自定义属性ID值来选择获取该分类的渲染内容
    document
      .querySelector(".classify-items")
      .addEventListener("click", function (e) {
        render(e.target.dataset.id);
        if (e.target.tagName === "P") {
          document.querySelector(".item .active").classList.remove("active");
          e.target.classList.add("active");
        }
      });
    function render(i) {
      let str = "";
      if (list[i].children) {
        // console.log(list[i].children);
        list[i].children.forEach((item) => {
          //   console.log(item);
          str += `<div class="item-photo">
                <img src="${item.image.preview_url}" alt="">
                <p>${item.name}</p>
            </div>`;
        });
      }
      document.querySelector(".goods-items").innerHTML = str;
    }
    render(0);
    //   list[0].children
  }
);

let items = document.querySelector(".classify-items");
items = addEventListener("scroll", function (e) {
  // console.log(e);
});

// document.querySelector(".main").style.height = `${
//   (document.documentElement.clientHeight - 130) / 3.75
// }+vw`;
// console.log(document.documentElement.clientHeight);
1, 2, 10, 5, 3, 6, 8, 9, 10;
